import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal } from 'antd';
import React from 'react';

const FormItem = Form.Item;

const UpdateForm = props => {
  const {updateData, updateModalVisible, form, onSubmit: handleUpdate, onCancel } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleUpdate({...fieldsValue, id: updateData.id});
    });
  };

  const formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    }
  }

  return (
    <Modal
      destroyOnClose
      title="编辑航线类型座位价格"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem {...formLayout} label={updateData&&updateData.segmentType}>
        {form.getFieldDecorator('price', {
          rules: [
            {
              required: true,
              message: '每座价格不能为空,且只能为正整数',
              pattern: new RegExp(/^[1-9]\d*$/, "g")
            },
          ],
          initialValue: updateData.price
        })(<Input placeholder="请输入" maxLength={5} suffix="元/每座"/>)}
      </FormItem>
    </Modal>
  );
};

export default Form.create()(UpdateForm);
